<template>
  <div>
    <div style="display: flex">
      <div style="padding-right: 40px">
        <p>选择操作的对象：{{ name }}</p>
      </div>
      <div>
        <el-button type="primary">新增节点</el-button>

        <el-button type="danger">删除节点</el-button>

        <el-button type="warning">修改节点</el-button>

      </div>

    </div>

    <div class="echarts-chart"></div>
  </div>
</template>
<script setup>
//引入初始化钩子 和 定义对象变量
import { ref, onMounted } from 'vue';
//一如线图生成对象
import * as echarts from 'echarts';

const name = ref('');
const chartInstance = ref(null);
onMounted(() => {
  chartInstance.value = echarts.init(document.querySelector('.echarts-chart'));
  const options = {
    title: {
      text: '我的线状图'
    },
    series: [{
      type: 'graph',
      layout: 'force',
      force: {
        repulsion: 700
      },
      data: [{
        name: '我是孙悟空',
        label: { show: true },
        emphasis: { focus: false }
      }, {
        name: '我是唐僧',
        label: { show: true },
      }, {
        name: '我是沙僧',
        label: { show: true },
      }, {
        name: '我是猪八戒',
        label: { show: true },
      }, {
        name: '我是被暴打的妖怪',
        label: { show: true },
      }],
      links: [{
        source: '我是唐僧',
        target: '我是孙悟空'
      }, {
        source: '我是唐僧',
        target: '我是沙僧'
      }, {
        source: '我是唐僧',
        target: '我是猪八戒'
      }, {
        source: '我是孙悟空',
        target: '我是被暴打的妖怪'
      }]
    }]
  };
  chartInstance.value.setOption(options);
  // 点击事件
  chartInstance.value.on('click', (params) => {
    if (params.dataType === 'node') {
      name.value = params.data.name;
    }
  });
});
</script>
<style scoped>
.echarts-chart {
  width: 100%;
  height: 400px;
}
</style>